<template>
	<view class="page">
		<view class="header">
			<view class="input-view">
				<!-- <uni-icon type="search" size="22" color="#ffffff"></uni-icon>
				<view class='cuIcon-search'></view>
				<input v-model="inputText" bindconfirm="search" class="input" type="text" placeholder="输入加工单号或名称搜索" />
				<input confirm-type="搜索" @blur="postSearch" class="input" type="text" placeholder="输入加工单号或名称搜索" /> -->


				<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
				<view class='cuIcon-search'></view>
				<input v-model="inputText" confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="输入单号搜索" >
				<view style="background-color: #5f5f63;border-radius: 100%;color: #FFFFFF;width: 40rpx;height: 40rpx;display: flex;justify-content: center;" @click="clear">
					<view style="line-height: 40rpx;">X</view>
				</view>
				</input>
			</view>
		</view>
		<!-- <view class="cu-bar bg-white search">
		    <view class="search-form round">
		        <text class="cuIcon-search"></text>
		        <p-input-search :dataSource="listData" @select="handleChange" placeholder="输入加工单号搜索"></p-input-search>
		    </view>
		    <view class="action" @tap="search">
		        <button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
		    </view>
		</view> -->
		<view class="uni-list" style="background-color: #F2F2F2;">
			<view class="uni-list-cell margin-top margin-left-sm margin-right-sm" style="background-color: #FFFFFF;border-radius:30upx ;" hover-class="uni-list-cell-hover" v-for="(item,index) in listData"
			 :key="index" >
				<view class="uni-media-list">
					<view class="uni-media-list-body" :style="{height: listHeight(item.itemList)}">
						<view class="uni-media-list-text-top margin-bottom-sm">
						<text>客户：{{item.kunnr==null?'':item.kunnr}} </text>
						<text>产品：{{item.maktx==null?'':item.maktx}} </text>
						</view>
						<view class="uni-media-list-text-bottom margin-bottom-sm" >
						<text>{{item.matnr}}  {{item.colorName==null?'':item.colorName}} {{item.sizeName==null?'':item.sizeName}}</text>
						</view>
						<view class="uni-media-list-text-bottom margin-bottom-sm ">
						<text>计划数量：{{item.mgvrg}}</text>
						<text>计划交期：{{item.fsavd==null?'':item.fsavd}} </text>
						</view>
						<view class="uni-media-list-text-bottom " v-for="(citem,cindex) in listData[index].itemList" :key="cindex" >
							<text>{{citem.vornrName}}：{{citem.gmnga}} </text>
							<!-- <text>完成进度：{{citem.scheduleStr}}
							</text> -->
							<view class="progress-box">
							    <progress :percent="citem.schedule" show-info stroke-width="3" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['companyCode']),
			    listHeight(){
					return function(e) {
					let i = e.length
			      return (90 + i * 23) + 'px';
				  }
			    },

		},
		data() {
			return {
				title: '下拉刷新 + 加载更多',
				data: [],
				listData: [],
				pageNo: 0,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				inputText:"",
			};
		},

		onShow() {

			this.listData = [],
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
			this.initData();
			// this.loadData();
		},
		onLoad(e) {
			console.log(e.selFlag);
			this.selFlag = e.selFlag;
		},
		onUnload() {
			this.max = 0;
				// this.data = [],
				this.listData = [];
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				uni.showToast({
					icon: 'none',
					title: this.loadMoreText
				});
				return;
			}
			setTimeout(() => {
				this.listData=[]
				this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			this.inputText=''
			this.pageNo=0
			this.initData();
			uni.stopPullDownRefresh();
			// this.loadData();
		},
		methods: {
			// 输入 回车监听事件
			confirm(e) {
				// 该值可用于搜索使用
				this.pageNo=0
				this.endFlag=false
				// this.inputText=e.value
				if(this.inputText){
					this.getList(true);
				}
			},
			clear() {
				this.inputText = ""
			},
			search(){
			    this.pageNo=0;
			    this.getList(true);
			},
			getSearchList() {
				this.listData=[]
				let url = '/sdReport/appOrderProgressReport'
				this.pageNo+=1
				this.$http.get(url, {
					params: {
						confirmationFlag:"1",
						"pageNo":this.pageNo,
						"pageSize":30,
						"selKeyword":this.inputText,

					}
				}).then(res => {
					if (res.data.success) {
						this.listData=res.data.result.records;
						if (this.listData.length <30) {
							this.endFlag = true;
							this.loadMoreText = "已显示全部数据"
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			// loadData(){
			//     // this.loadModal=true;
			//     selectCustomerList({
			//         pageNo:this.pageNo,
			//         pageSize:this.pageSize,
			// 		dispatchNo:this.inputText?this.inputText:''
			//         // name1:this.lgobe?this.lgobe:'',
			//     }).then(res=>{
			//         if(res.success==true){
			//             res.result.records.forEach(item=>{
			//                 // item.is_default=0;
			//                 item.name=item.dispatchNo
			//                 this.listData.push(item)
			//             })
			//             if(res.result.records.length>=10){
			//                 this.status='loading';
			//             }else{
			//                 this.status='noMore';
			//             }
			//         }
			//         // this.loadModal=false;
			//         // uni.stopPullDownRefresh();
			//     })
			// },
			// //用户点击获取的数据
			// handleChange(data) {
			//     this.inputText=data;
			// },
			// onInput(e) {
			// 	console.log(this.inputtext)
			// 	setTimeout(() => { console.log(this.inputtext) }, 0)
			// 	// 【不用v-model绑定表单,直接时间获取值】这种方式是uni-app官方的方式,测试结果正确！
			//     console.log(e.detail)
			//     // this.text = e.detail
			// 	},

			initData() {
// 				uni.showLoading({
// 					title: '加载中',
// 					mask: false
// 				});
				setTimeout(() => {
					this.getList(false);
					uni.stopPullDownRefresh();
				}, 300);
			},

			getList(flag) {
				if(flag==true){
					this.pageNo=0
				}
				console.log('pageNo='+this.pageNo)
				this.listData=[];
				this.pageNo+=1
				// let url = '/dispatchOrder/dispatchOrder/list'
				let url = '/dcloud/sdReport/appOrderProgressReport'
				this.$http.get(url, {
					params: {
						confirmationFlag:"1",
						"pageNo":this.pageNo,
						"pageSize":30,
						"selKeyword":this.inputText,
					}
				}).then(res => {
					if (res.data.success) {
						console.log("success");
						this.listData=res.data.result.records;
						if (this.listData.length <30) {

							this.endFlag = true;
							this.loadMoreText = "已显示全部数据"
						}
					}
				}).catch(err => {
					console.log(err);
				});

				// let data = {
				// 		pageNo: this.pageNo,
				// 		pageSize: "200",
				// 		filter: "13400000000",
				// 		dispatchNo:"",
				// 		createTime:"",
				// 		psmng:"",
				// 		createBy:""
				// 	}
				// 	console.log(JSON.stringify(data))
				// 	console.log(this.$token)
				// uni.request({
				// 	url: 'http://mc.xmwells.com/jeecg-boot/dispatchOrder/dispatchOrder/list',
				// 	method: "GET",
				// 	data: data,
				// 	header: {
				// 		"X-Access-Token": 1
				// 	},
				// 	success: res => {
				// 		this.listData=res.data.result.records;
				// 		console.log(res.data);
				// 		console.log(this.listData)
								// let data = res.data.result;
// 						if (res.statusCode == "200" && res.data.respCode == "0") {
// 							let data = res.data.data;
// 							if (data.length < 20) {
// 								this.endFlag = true;
// 								this.loadMoreText = "已显示全部数据"
// 							}
// 							data.forEach((e) => {

// // 								if (e.amount == null || e.amount == "") {
// // 									e.amount = 0;
// // 								}
// 								this.listData.push({
// 								// 	// customerCode: e.customerCode,
// 								// 	// customerDesc: e.customerDesc,
// 									dispatchNo:e.dispatchNo,
// 									createTime: e.createTime,
// 									psmng:e.psmng,
// 									createBy:e.createBy
// 									// material: e.material,
// 									// mobile:e.mobile
// 									// description:e.description,
// 									// quantity: e.quantity,
// 									// unit: e.unit,
// 									// id: e.id,
// 									// netValue: e.netValue
// 								});
// 							});
// 							if (this.listData.length==0){
// 								uni.showToast({
// 									icon: 'none',
// 									title: '没有查到记录'
// 								});
// 							}
						// } else {
						// 	// 数据获取失败
						// }
				// 	},
				// 	fail: (err) => {
				// 		console.log('request list fail', err);
				// 	},
				// 	complete: () => {
				// 	}
				// });
			},

			postSearch(e) {
				this.listData = [];
				this.endFlag = false;
				this.pageNo = 1;
				this.filter = e.detail.value;
				this.loadMoreText = "加载更多",
					this.getList();
			},
			// computed:{
			// 		listData () {
			// 			var arr = []
			// 			this.list.forEach((item) => arr.push(item))
			// 			if (this.inputText) {
			// 				arr = this.list.filter(item => item.taskNumber.includes(this.inputText))
			// 			}
			// 			return arr
			// 		}
			// 	},
		}
	}
</script>

<style scoped>
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #FFFFFF;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.bottom {
		position: fixed;
		bottom: 90upx;
		right: 50upx;
		width: 90upx;
		height: 90upx;
	}

	.uni-media-list-text-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #8f8f94;
	}
	.uni-media-list-body {
		/* height: 400upx; */
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;
	}
	.progress-box {
	    display: flex;
	    /* height: 50rpx; */
	    /* margin-bottom: 60rpx; */

		width: 45%;
		line-height: 10upx;
		/* font-size: 26upx; */
		color: #8f8f94;
	}

</style>
